<template>
    <ContainerBox type="common" id="question-list" class="questions-list">
      <div v-if="questions === undefined||questions===null||questions.length===0" class="no-question">无相关问题</div>
      <div class="question" v-for="(question,index) in questions">
        <div class="question-title" @click="$emit('getDetail',question.id)">{{index+1}}、{{question.title}}</div>
<!--        <div class="question-view" >浏览量：{{question.viewCount}}</div>-->
        <div class="options">
          <div v-if="question.me" style="margin-right: 10px"  @click="updateQuestion(question.id)"> 编辑</div>
          <div v-if="question.me"  @click="deleteQuestion(question.id)"> 删除</div>
<!--          <div  >查看详情页</div>-->
        </div>
      </div>
    </ContainerBox>
</template>

<script>
import ContainerBox from '../../../box/container_box';
export default {
  name: "skill_page_questions_all",
  components: {ContainerBox},
  data() {
    return {
      show: false,
      questions: [],
      currentPage: 1,
      stop: false
    }
  },
  props: ["keyword"],
  mounted() {
    this.initQuestionList();
    this.scrollNewQuestions();
  },
  methods: {
    initQuestionList() {
      if (this.$route.query.sectionId) {
        this.getQuestionsBySectionId();
      } else {
        this.getAllQuestions();
      }
    },
    getQuestionDetail(questionId) {
      this.show = true;
      if (this.$refs.detail) {
        this.$refs.detail.getQuestionsDetail(questionId);
      }
    },
    getQuestions(data){
      const self = this;
      this.$axios({
        method: 'post',
        url: '/skill/question/pageQuestionCondition/'+self.currentPage+'/10',
        data: data
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        console.log(jsonObj);
        for (let i=0; i<10; i++) {
          if (jsonObj.data.rows[i] === undefined || jsonObj.data.rows[i] === null) {
            self.stop = true;
            break;
          }
          self.$set(self.questions,self.currentPage*10+i-10,jsonObj.data.rows[i]);
        }
        self.currentPage += 1;
      })
    },
    // 滚动刷新
    scrollNewQuestions() {
      const self = this;
      const skillDetail = document.getElementById("skill-page-detail");
      const questionList = document.getElementById("question-list");
      skillDetail.addEventListener("scroll", ()=> {
        if ( !self.stop && (300+questionList.offsetHeight- skillDetail.offsetHeight -skillDetail.scrollTop < 150)){// 右边数值越大，越早进行刷新
          self.getAllQuestions();
          console.log("scroll for new questions!");
        }
      });
    },
    getAllQuestions(){
      this.getQuestions({
        skillId : this.$route.params.id
      })
    },
    getQuestionsByKeywords: function (keyword) {
      this.questions=[];
      this.currentPage= 1;
      this.stop= false
      const self = this;
      this.getQuestions({
        title: keyword,
        skillId: this.$route.params.id,
        sectionId: self.$route.query.sectionId?self.$route.query.sectionId:'',
      })
    },
    getQuestionsBySectionId: function () {
      const self = this;
      this.getQuestions({
        sectionId: self.$route.query.sectionId,
        skillId: this.$route.params.id
      })
    },
    getQuestionById(id) {
      const self = this;
      this.$axios({
        method: 'get',
        url: '/skill/question/get/'+id,
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        console.log(jsonObj);
        self.$set(self.questions, 0, jsonObj.data.VO);
      })
    },
    deleteQuestion(questionId) {
      const self = this;
      this.$confirm('你的问题将被删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.$axios({
          method: 'delete',
          url: '/skill/question/delete/'+questionId
        }).then(function (response) {
          var jsonString = JSON.stringify(response.data);
          var jsonObj = JSON.parse(jsonString);
          console.log(jsonObj);
          if (jsonObj.success) {
            self.$message({
              type: 'success',
              message: '删除成功!'
            });
            //location.reload();
            if (self.$route.query.sectionId) {
              self.getQuestionsBySectionId();
            } else if (self.keyword) {
              self.getQuestionsByKeywords();
            } else {
              self.getAllQuestions();
            }
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    updateQuestion: function (questionId) {
      // 跳转到编辑问题界面
      this.$router.push('/skillPage/'+this.$route.params.id+'/questions/editPage/'+questionId);
    },
    addQuestion: function () {
      // 跳转到新建问题界面
      if (this.$route.query.sectionId) {
        this.$router.push('/skillPage/'+this.$route.params.id+'/questions/editPage/0?sectionId='+this.$route.query.sectionId);
      } else {
        this.$router.push('/skillPage/'+this.$route.params.id+'/questions/editPage/0');
      }
    },
  },
  watch: {
    keyword(after, before) {
      if (after === '' || after === null) {
        this.questions=[];
        this.currentPage= 1;
        this.stop= false
        this.getQuestionsByKeywords(after);
        this.scrollNewQuestions();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../.././assets/style/common";
.questions-list {
  position: relative;
  min-height: 400px;
  .question {
    box-sizing: border-box;
    height: 60px;
    padding: 5px;
    margin: 10px 0;
    border-radius: 10px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .question-title {
      width: 600px;
      @include content_over();
    }
    .question-view {
      width: 120px;
      font-size: 14px;
    }
    .options {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 300px;
      .edit-btn {
        @include btn_add();
        width: 80px;
        margin-right: 10px;
      }
      .delete-btn {
        @include btn_delete();
        width: 80px;
        margin-right: 10px;
      }
    }
    &:hover {
      transition: 0.5s;
      background-color: #dcdcdc;
      cursor:pointer;
    }

  }
}
</style>
